<template>
  <p class="lineload" v-if="ishow==true">
    <i class="uiLoading" v-if="isLoading"></i><span>&nbsp;&nbsp;{{tip}}</span>
  </p>

</template>
<script>
    export default {
        components: {
        },
        data () {
            return {
            }
        },
        props: {
            ishow:{ type:[Boolean] , default: false },
            isLoading:{ type:[Boolean] , default: true },
            tip:{ type:[String] , default: "加载中" },
        },
        created(){

        },
        mounted(){

        },
        methods: {

        }
    }
</script>
<style lang="scss" scoped>
  .lineload{
    text-align:center;padding-bottom:  px2rem(20px);padding-top: px2rem(20px);
    .uiLoading {
      width: px2rem(50px);
      height: px2rem(50px);
      display: inline-block;
      vertical-align: middle;
      animation: weuiLoading 1s steps(12, end) infinite;
      background: transparent url("") no-repeat;
      background-size: 100%;
    }
    @-webkit-keyframes weuiLoading {
      0% {
        transform: rotate3d(0, 0, 1, 0deg);
      }

      100% {
        transform: rotate3d(0, 0, 1, 360deg);
      }
    }

    @keyframes weuiLoading {
      0% {
        transform: rotate3d(0, 0, 1, 0deg);
      }

      100% {
        transform: rotate3d(0, 0, 1, 360deg);
      }
    }
    span{
      vertical-align:middle;display:inline-block;color:#777777;
      font-size: px2rem(36px);
      padding-left: px2rem(10px);
    }
  }
</style>
